<template>
  <div>
    <div class="volumeinfo" v-for="(item, index) in volumeinfo">
          <!-- {{volumeinfo}} -->
          <div class="voluinfo-head">

              <i>&yen;</i><span class="voluinfo-price">{{+item.remainValue? item.remainValue : item.couponValue}}</span>
              <span class="voluinfo-tit" v-if="item.couponStatus == '2'">可使用</span>
              <span class="voluinfo-tit" v-if="item.couponStatus == '3'">已占用</span>
              <span class="voluinfo-tit" v-if="item.couponStatus == '4'">已使用</span>
              <span class="voluinfo-tit" v-if="item.couponStatus == '5'">已过期</span>
          </div>
          <div class="voluinfo-box">
              <div class="voluinfo-list">
                  <div class="voluinfo-list-left">券名称</div>
                  <div class="voluinfo-list-right">{{item.couponRuleName}}</div>
              </div>
              <div class="voluinfo-list">
                  <div class="voluinfo-list-left">券号</div>
                  <div class="voluinfo-list-right">{{item.couponId}}</div>
              </div>
              <div class="voluinfo-list">
                  <div class="voluinfo-list-left">有效期</div>
                  <div class="voluinfo-list-right">
                    {{item.startTime.substr(0,16)}}
                    &nbsp;-&nbsp;
                    {{item.endTime.substr(0,16)}}
                  </div>
              </div>
          </div>
          <div class="voluinfo-box">
              <div class="voluinfo-list">
                  <div class="voluinfo-list-left">适用范围</div>
                  <div class="voluinfo-list-right">{{item.couponRulesShowMsg}}</div>
              </div>
              <div class="voluinfo-list">
                  <div class="voluinfo-list-left">使用规则</div>
                  <div class="voluinfo-list-right">{{item.promotionLabel}}</div>
              </div>
              <div class="voluinfo-list" v-if="item.couponRulesTerminalName">
                  <div class="voluinfo-list-left">用券终端</div>
                  <div class="voluinfo-list-right">{{item.couponRulesTerminalName}}</div>
              </div>

          </div>
    </div>
    <a :href="volumeinfo[0].couponStatus == '2'? '#/index': '#/volumeinfo/'+$route.params.data" class="nowuse" :class="{'expried': volumeinfo[0].couponStatus != '2'}">立即使用</a>


  </div>
</template>
<script>

  export default {
    data() {
      return {

      }
    },
    created(){
      $('.app-adver')[0] &&  $('.coupontype').addClass('cart2-coupon')
    },
    computed:{
       volumeinfo() {
          var arr = [];
          arr[0] = JSON.parse(sessionStorage.vi)
          return arr;
       }
    }
  }
</script>
<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
   .volumeinfo {
    margin-top: _(20);
    padding: 0 _(24);
    background-color: #fff;
   }
   .voluinfo-head {
      height: _(89);
      line-height: _(89);

      i, span.voluinfo-price{
          font-size: _(34);
          color:#ff782d;
      }
      span.voluinfo-price {
        margin-left: _(8);
      }
      span.voluinfo-tit {
        width: _(100);
        height: _(30);
        line-height: _(30);
        font-size: _(22);
        background-color: #ffc001;
        color:#ffffff;
        margin-left: _(20);
      }
   }

   .voluinfo-box {
      border-top: 1px solid #dddddd;
      padding: _(10) 0;

        .voluinfo-list {
              height: _(57);
              line-height: _(57);
              font-size: _(26);

              .voluinfo-list-left {
                float: left;
                width: _(124);
                padding-right: _(20);
                text-align: right;
                color: #999;
              }
              .voluinfo-list-right {
                  float: left;
                  width: _(578);
                  color: #444;
              }
        }
   }
   .nowuse {
      display: block;
      height: _(88);
      line-height: _(88);
      margin: _(40) _(24) 0;
      background-color: #ff782d;
      border-radius: _(4);
      font-size: _(30);
      color: #fff;
      text-align: center;

      &.expried {
        background-color: #bbb;
      }
   }
</style>
